<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     #mycanvas{
         border:1px solid #000;
     }
    </style>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script>
    var mycanvas=document.getElementById("mycanvas");
    var cvs=mycanvas.getContext("2d");
    mycanvas.width=500;
    mycanvas.height=500;
    //有填充
    // cvs.fillStyle='blue';
    // cvs.fillRect(0,0,100,100);
    // //无填充
    // cvs.strokeStyle='#0f0';
    // cvs.strokeRect(100,200,100,100);


    //画线条  moveTo  lineTo  stroke();
//    cvs.moveTo(20,20);
//    cvs.lineTo(80,20);
//    cvs.strokeStyle="#f00";
//    cvs.stroke();
   //正方形
//    cvs.moveTo(20,20);
//    cvs.lineTo(80,20);
//    cvs.lineTo(80,80);
//    cvs.lineTo(20,80);
//    cvs.lineTo(20,20);
//    cvs.strokeStyle="#f00";
//    cvs.stroke();
//    cvs.fillStyle="#0f0";
//    cvs.fill();
//    //画箭头
//    cvs.moveTo(50,50);
//    cvs.lineTo(150,50);
//    cvs.lineTo(150,30);
//    cvs.lineTo(200,80);
//    cvs.lineTo(150,120);
//    cvs.lineTo(150,100);
//    cvs.lineTo(50,100);
//    cvs.lineTo(50,50);
//    cvs.strokeStyle="#f00";
//    cvs.stroke();
//    //beginPath  closePath
//    cvs.moveTo(100,100);
//    cvs.lineTo(200,150);
//    cvs.lineTo(100,200);
//    cvs.strokeStyle="#ccc";
//    cvs.stroke();

//    cvs.beginPath();
//    cvs.moveTo(200,100);
//    cvs.lineTo(300,150);
//    cvs.lineTo(200,200);
//    cvs.strokeStyle="pink";
//    cvs.stroke();
   

//    cvs.beginPath();
//    cvs.moveTo(300,100);
//    cvs.lineTo(400,150);
//    cvs.lineTo(300,200);
//    cvs.closePath();
//    cvs.strokeStyle="orange";
//    cvs.stroke();
   //画圆形
    cvs.arc(300,400,50,0,2*Math.PI);
    cvs.stroke();

    console.log(cvs);
    </script>
</body>
</html>